<template>
  <div>
    <login-top middleTop="登录bilibili">
      <div slot="right" style="font-size:3.467vw" @click="$router.push('/register')">切换到注册</div>
    </login-top>
    <login-text
      label="账号"
      placeholder="请输入账号"
      style="margin:4vw 0"
      rule="^.{6,16}$"
      @inputChange="res => model.username = res"
    ></login-text>
    <login-text
      label="密码"
      placeholder="请输入密码"
      type="password"
      rule="^.{6,16}$"
      @inputChange="res => model.password = res"
    ></login-text>
    <login-btn btntext="登录" @reg="reg"></login-btn>
  </div>
</template>

<script>
import LoginTop from "@/components/common/LoginTop.vue";
import LoginText from "@/components/common/LoginText";
import LoginBtn from "@/components/common/LoginBtn";
export default {
  data() {
    return {
      model: {
        username: "",
        password: ""
      }
    };
  },
  components: { LoginTop, LoginText, LoginBtn },
  methods: {
    async reg() {
      //   console.log(this.model);
      let rulg = /^.{6,16}$/;
      if (rulg.test(this.model.username) && rulg.test(this.model.password)) {
        const res = await this.$http.post("/login", this.model);
        if (res.code === 200) {
          this.$msg.success(res.data.msg);
        } else {
          this.$msg.fail(res.data.msg);
        }
      } else {
        this.$msg.fail("格式不正确，请重新输入");
      }
    }
  }
};
</script>

<style>
</style>